<template>
  <div class="shop-r-form">
    <h2 class="pancel-title panel-15 flex v-align-c">
      <span></span>
      <i>小程序标题栏</i>
    </h2>
    <el-form class="pad-t-15 pad-l-25 pad-r-25 form-diy">
      <div class="mar-l--25 mar-t--28 pad-b-15">
        <h3 class="pancel-s-title">标题设置</h3>
      </div>
      <div v-if="pageType === 10" class="border-box near-box">
        <h4>样式风格</h4>
        <div class="mar-t--5 mar-b--10">
          <el-form-item>
            <div class="font-14">
              <el-row>
                <el-col :span="12">
                  <el-radio v-model="customPage.searchFlag" label="0">无搜索栏</el-radio>
                </el-col>
                <el-col :span="12">
                  <el-radio v-model="customPage.searchFlag" label="1">有搜索栏</el-radio>
                </el-col>
              </el-row>
            </div>
          </el-form-item>
        </div>
      </div>
      <div v-if="customPage.searchFlag == 0" class="border-box">
        <h4>标题名称</h4>
        <div class="mar-t-1 mar-b--6">
          <el-form-item>
            <div>
              <el-input placeholder="请输入标题" maxlength="10" class="mini-s-input" v-model="customPage.mpPageTitle"/>
            </div>
          </el-form-item>
        </div>
      </div>
      <div v-else class="border-box">
        <h4>搜索默认文字</h4>
        <div class="mar-t-1 mar-b--6">
          <el-form-item>
            <div>
              <el-input placeholder="搜索商品" maxlength="4" class="mini-s-input" v-model="customPage.mpPageSearchTxt"/>
            </div>
          </el-form-item>
        </div>
      </div>
      <div class="mar-l--25 mar-t--28 pad-b-15">
        <h3 class="pancel-s-title">颜色风格</h3>
      </div>
      <div class="border-box near-box">
        <div>
          <h4>背景</h4>
          <div class="mar-t-3 mar-b-5">
            <el-form-item>
              <div class="font-14 v-align-c">
                <el-color-picker
                  v-model="customPage.titleBackgroundColor"
                  @active-change="activecolorChange(customPage, 'titleBackgroundColor', '#7427ff', $event)"
                  @change="colorChange(customPage, 'titleBackgroundColor', '#7427ff', $event)"
                  :predefine="predefineColors"
                  class="color-sel" />
                <el-input
                  class="mar-l-20 color-sel-input"
                  placeholder="请输入内容"
                  v-model="customPage.titleBackgroundColor"
                  @change="iptColorChange(customPage, 'titleBackgroundColor', '#7427ff', $event)">
                </el-input>
                <el-button type="text" class="color-sel-btn" @click="resetColor(customPage, 'titleBackgroundColor', '#7427ff')">重置</el-button>
              </div>
            </el-form-item>
          </div>
        </div>
        <!-- <div v-if="customPage.searchFlag !== '1'">
          <h4>文字</h4>
          <div class="mar-t-3 mar-b-5">
            <el-form-item>
              <div class="font-14 v-align-c">
                <el-color-picker 
                  v-model="customPage.titleFontColor"
                  @active-change="activecolorChange(customPage, 'titleFontColor', '#FFFFFF',$event)"
                  @change="colorChange(customPage, 'titleFontColor', '#FFFFFF',$event)"
                  :predefine="predefineColors"
                  class="color-sel" />
                <el-input
                  class="mar-l-20 color-sel-input"
                  placeholder="请输入内容"
                  v-model="customPage.titleFontColor"
                  @change="iptColorChange(customPage, 'titleFontColor', '#FFFFFF',$event)"></el-input>
                <el-button type="text" class="color-sel-btn" @click="resetColor(customPage, 'titleFontColor', '#FFFFFF')">重置</el-button>
              </div>
            </el-form-item>
          </div>
        </div> -->
      </div>
      <div class="border-box near-box">
        <h4>状态栏</h4>
        <div class="mar-t--5 mar-b--10">
          <el-form-item>
            <div class="font-14">
              <el-row>
                <el-col :span="12">
                  <el-radio v-model="customPage.titleType" label="11">黑色</el-radio>
                </el-col>
                <el-col :span="12">
                  <el-radio v-model="customPage.titleType" label="10">白色</el-radio>
                </el-col>
              </el-row>
            </div>
          </el-form-item>
        </div>
      </div>
      <div v-if="pageType === 10 && customPage.searchFlag !== '1'" class="border-box near-box">
        <h4>对齐方式</h4>
        <div class="mar-t--5 mar-b--10">
          <el-form-item>
            <div class="font-14">
              <el-row>
                <el-col :span="12">
                  <el-radio v-model="customPage.titleCenter" label="11">居左</el-radio>
                </el-col>
                <el-col :span="12">
                  <el-radio v-model="customPage.titleCenter" label="10">居中</el-radio>
                </el-col>
              </el-row>
            </div>
          </el-form-item>
        </div>
      </div>
      <div v-if="pageType === 10" class="border-box">
        <h4>图标</h4>
        <div class="mar-t--5 mar-b--10 flex">
          <el-form-item>
            <div class="mar-t-2 mar-b--10 icon-url-upload">
              <div v-if="customPage.iconUrl" class="goods-remove" @click="removeIcon">
                <i class="el-icon-error" />
              </div>
              <el-upload class="avatar-uploader"
                action="/api/common/uploadFiles"
                accept="image/jpeg,image/gif,image/png,image/bmp"
                list-type="picture-card-s radius-0"
                :before-upload="beforeUpload" name="files"
                v-loading="fileLoading"
                :data="token" :show-file-list="false" :on-success="handleUploadSuccess">
                  <img v-if="customPage.iconUrl" :src="customPage.iconUrl" width="70px" height="70px">
                  <i v-else class="el-icon-plus"></i>
              </el-upload>
            </div>
          </el-form-item>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
  import { getStrByLength } from '@/utils'
  import { getToken } from '@/utils/auth'

  export default {
    components: { },
    props: {
      customPage1: {
        type: Object,
        default: null
      }
    },
    data() {
      return {
        customPage: {
          pageId: '',
          enterpriseId: this.getEnterpriseId(),
          pageType: 10,
          backgroundColor: '#FFFFFF',
          shareTitle: '',
          sharePicUrl: '',
          iconUrl: '',
          iconWidth: 0,
          iconHeight: 0,
          titleCenter: 10,
          titleType: 10,
          pageTitle: '',
          mpPageSearchTxt: '搜索商品',
          titleFontColor: '#FFFFFF',
          titleBackgroundColor: '#7427ff',
          shopFontColor: '#000000',
          shopBackgroundColor: '#FFFFFF'
        },
        fullScreenLoading: null,
        pictureType: '1',
        predefineColors: [],
        fileLoading: false,
        pageType: null
      }
    },
    // 初始化页面
    created() {
      this.resetDetails()
      this.customPage = this.customPage1
      this.$set(this.customPage, 'searchFlag', this.customPage.searchFlag ? this.customPage.searchFlag.toString() : '0')
      this.$set(this.customPage, 'titleCenter', this.customPage.titleCenter ? this.customPage.titleCenter.toString() : '10')
      this.$set(this.customPage, 'titleType', this.customPage.titleType ? this.customPage.titleType.toString() : '10')
      this.$set(this.customPage, 'iconUrl', this.customPage.iconUrl ? this.customPage.iconUrl : '')
      this.$set(this.customPage, 'iconWidth', this.customPage.iconWidth ? this.customPage.iconWidth : 0)
      this.$set(this.customPage, 'iconHeight', this.customPage.iconHeight ? this.customPage.iconHeight : '')
      this.token = { accessToken: getToken() }
      this.predefineColors = this.$store.state.globalData.predefineColors
      const queryParams = this.getCurrentPage().query
      this.pageType = Number(queryParams.pageType)
    },
    methods: {
      removeIcon() {
        this.customPage.iconUrl = ''
        this.customPage.iconWidth = 0
        this.customPage.iconHeight = 0
      },
      getStrByLength(str, n) {
        return getStrByLength(str, n)
      },
      handleRemove(file, fileList) {
        console.log(file, fileList)
      },
      handlePictureCardPreview(file) {
        console.log(file)
      },
      beforeUpload(file, item) {
        const isJPG = file.type === 'image/jpeg'
        const isGIF = file.type === 'image/gif'
        const isPNG = file.type === 'image/png'
        const isBMP = file.type === 'image/bmp'
        if (!isJPG && !isGIF && !isPNG && !isBMP) {
          this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!')
        }
        this.fileLoading = true
        const isSize = new Promise((resolve, reject) => {
          const img = new Image()
          img.onload = function() {
            resolve(img)
          }
          img.src = URL.createObjectURL(file)
        }).then((res) => {
          console.log('res icon 11', res, res.width, res.height)
          this.customPage.iconWidth = res.width
          this.customPage.iconHeight = res.height
        })
        return (isJPG || isBMP || isGIF || isPNG || isSize)
      },
      handleUploadSuccess(res, index) {
        this.fileLoading = true
        if (res.code === 101) {
          this.fileLoading = false
          this.customPage.iconUrl = res.data[0]
          this.$bus.$emit('resetDetailsPage', this.customPage)
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
          return false
        }
      },
      resetDetails() {
        this.customPage = {
          pageId: '',
          enterpriseId: this.getEnterpriseId(),
          pageType: 10,
          backgroundColor: '#FFFFFF',
          shareTitle: '',
          sharePicUrl: '',
          iconUrl: '',
          iconWidth: 0,
          iconHeight: 0,
          searchFlag: 0,
          titleCenter: 10,
          titleType: 10,
          pageTitle: '',
          mpPageSearchTxt: '搜索商品',
          titleFontColor: '#FFFFFF',
          titleBackgroundColor: '#7427ff',
          shopFontColor: '#000000',
          shopBackgroundColor: '#FFFFFF'
        }
      },
      colorChange(obj, key, defaultColor, e) {
        // 颜色值变化
        if (!e) {
          obj[key] = defaultColor
        }
      },
      activecolorChange(obj, key, defaultColor, e) {
        // 调色板中值变化
        if (!e) {
          obj[key] = defaultColor
        }
      },
      iptColorChange(obj, key, defaultColor, e) {
        // 颜色输入框触发事件
        if (this.$utils.isHexColor(e)) {
          obj[key] = e
        } else {
          obj[key] = defaultColor
        }
      },
      resetColor(obj, key, defaultColor) {
        // 重置颜色按钮触发事件
        obj[key] = defaultColor
      }
    }
  }
</script>

<style lang="less" scoped>
  .icon-url-upload{
    position: relative;
    .goods-remove {
      position: absolute;
      padding: 5px;
      line-height: 1;
      right: -18px;
      top: -12px;
      z-index: 20;
      i {
        color: #949494;
        font-size: 20px;
        cursor: pointer;
      }
    }    
  }
</style>